<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       /* 大标题样式 */
       .xiangcebiaoti{
            height: 40px ; width: 300px; ; font-family: fantasy;text-align: center; background-color: aliceblue; margin-left: auto; margin-right: auto;
        }
        /* 首页标签样式 */
        .daohang{
             ma; text-align: center; background-color: aliceblue;height: 100px; width:100px; margin-left: auto; margin-right: auto;
        }
        /* 小标题样式 */
        .xiaobiaoti{
            text-align: center ; width: 80px; height: 30px; margin-left: auto; margin-right: auto; background-color: aliceblue;
        } 
        /* 美女图片位置 */
        #美女{
            text-align: center;
        }
        /* 型男图片位置 */
        #型男{
            text-align: center;
        }
        /* 主页背景 */
        body{
            background-image: url(beijing.jpg);
            width:100%; height: 100%;
            background-size: cover;
        }
        /* 企业家位置 */
        #企业家{
            text-align: center;
        }
        /* 科学家图片位置 */
        #科学家{
            text-align: center;
        }

     
        
       
        

    
    </style>
</head>
<body>
    
    <h1 class="xiangcebiaoti">Arin的有声相册</h1>
    <!-- 首页标签部分 -->
    <div class="daohang">
    <a href="#美女" >美女</a> <br>
    <a href="#型男" >型男</a> <br>
    <a href="#企业家" >企业家</a> <br>
    <a href="#科学家">科学家</a>
    </div>
    <!-- 美女部分 -->
    <div id="美女">

        <h2 class="xiaobiaoti">美女</h2>
            
        <a href="./meinv/taile.html">
            <img src="taile.png" width="400px" height="480px">
        </a>
        <a href="./meinv/jiatenghui.html">
            <img src="jiateng.jpg" height="480px" width="" >
        </a>
    <!-- 型男部分 -->
    <div  id="型男">
        <h2 class="xiaobiaoti">型男</h2>
        
        <a href="./xingnan/zhangjie.html">
            <img src="zhangjie1.jpg" height="480px">
        </a>
    
    </div>
    <!-- 企业家部分 -->
    <div id="企业家">
        <h2 class="xiaobiaoti">企业家</h2>
        <a href="qiyejia\mayun.html">
            <img src="qiyejia\OIP-C.jpg">
        </a>
    </div>
    <!-- 科学家部分 -->
    <h2 class="xiaobiaoti">科学家</h2>
    <div id="科学家">

        <a href="kexuejia\qianxuesen.html">
            <img src="kexuejia\R-C.jpg">
        </a>

    </div>
    
    
</body>
</html>